<template>
  <div class="login">
    <el-form
        :rules="rules"
        v-loading="loading"
        element-loading-text="正在登录..."
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)"
        :model="loginForm"
        class="login-form"
        label-position="left"
        ref="loginForm">

      <h3 style="padding-top: 30px">滨海 BB 平台</h3>

      <el-form-item
          prop="username"
          label="用户名"
          style="margin-left: 50px">
        <el-col :span="40">
          <el-input
              type="text"
              v-model="loginForm.username"
              placeholder="请输入用户名"
              :prefix-icon="Avatar"
          ></el-input>
        </el-col>
      </el-form-item>

      <el-form-item
          prop="password"
          label="密码"
          style="margin-left: 66px">
        <el-col>
          <el-input
              type="password"
              v-model="loginForm.password"
              placeholder="请输入密码"
              :prefix-icon="Key"
          ></el-input>
        </el-col>
      </el-form-item>

      <el-col :push="6">
        <el-form-item>
          <el-button
              type="primary"
              @click.prevent="login"
          >登录
          </el-button>
          <el-button
              @click="cancel"
              type="info">Cancel
          </el-button>
        </el-form-item>
      </el-col>
    </el-form>
  </div>

</template>

<script>
import {Avatar} from '@element-plus/icons';
import {Key} from '@element-plus/icons';
import {ElMessage} from 'element-plus'

export default {
  name: "Login",
  data() {
    return {
      Avatar,
      Key,
      loading: false,// 加载框是否加载中
      loginForm: { // 用户输入框内容
        username: '',
        password: ''
      },
      rules: { // 校验规则
        username: [{required: true, message: '请输入用户名！', trigger: 'blur'}],
        password: [{required: true, message: '请输入密码！', trigger: 'blur'}],
      }
    }
  },
  methods: {
    // 登录
    login() {
      this.loading = true;
      this.$refs.loginForm.validate((valid) => { // 饿了吗 提供的校验规则 验证
        if (valid) {
          this.postRequest('/login', this.loginForm).then(resp => {
            if (resp) {
              this.loading = false;
              // 后端返回 token 后存储
              const tokenStr = resp.obj.tokenHead + resp.obj.token;
              window.sessionStorage.setItem('tokenStr', tokenStr)
              this.$router.replace('/home')
            }
          })
        } else {
          ElMessage({
            message: '请输入完整信息！',
            type: "error",
            showClose: true,
            center: true
          })
          return false
        }
      })
      this.loading_l = true
    },
    // 清除输入框
    cancel() {
      this.loginForm.username = '';
      this.loginForm.password = '';
    }
  }
}
</script>

<style lang="less" scoped>
.login {
  background-image: url("../assets/bg2.jpg");
  background-size: 100% 100%;
  width: 100%;
  height: 100%;
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;

  .login-form {
    width: 450px;
    min-width: 350px;
    height: 40%;
    min-height: 400px;
    border-radius: 15px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3), 0 0 6px rgba(0, 0, 0, 0.2);

    button {
      width: 100px;
    }

    h3 {
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}
</style>
